<template>
  <div class="infinite-container cancel-order">
     <div class="tips-warning center" v-show="currentOrder.payStatus === 1" >
       <span >未支付</span>
      </div>
    <div class="tips-warning center" v-show="currentOrder.payStatus === 2" >
            <span >已支付</span>
      </div>

    <div class="content-box">
      <div class="content-title">
        <div>订单详情</div>
      </div>
    </div>
    <div>
      <div class="">
        <common-list title="就诊人" :desc="currentOrder.patientName"></common-list>
        <common-list title="科室医生" :desc="currentOrder.doctorName"></common-list>
        <common-list title="科室名称" :desc="currentOrder.departmentName"></common-list>
        <common-list title="就诊日期时间">
          <div class="confirm-message">
            {{currentOrder.scheduleDate}}
            {{currentOrder.beginTime | getTime}}
            {{currentOrder.endTime | getTime}}
          </div>
        </common-list>
        <common-list>
          <div slot="left">
            <div class="confirm-hospital">挂号费</div>
          </div>
          <div class="confirm-money">
            {{currentOrder.regFee | fixedMoney}}
          </div>
        </common-list>
      </div>
    </div>



    <div class="cancel-order-bottom mt10 content-box bgwhite" v-show="currentOrder.orderStatus!==2 && currentOrder.orderStatus!==3">
      <div class="content-title">
        <div>取消预约原因</div>
      </div>
      <div class="pd10">
        <mu-flexbox class="mt10" v-for="(r, i) in CANCEL_ORDER_RESIONS" :key="i">
          <mu-flexbox-item :grow="4" @click.native="radioResion=r">
              {{r}}
          </mu-flexbox-item>
          <mu-flexbox-item :grow="1" class="text-right">
              <mu-radio name="group" :nativeValue="r" v-model="radioResion" />
          </mu-flexbox-item>
        </mu-flexbox>
      </div>
        <div class="login pd20">
          <mu-raised-button label="取消预约" fullWidth primary class="submit-btn" @click="cancelOrder"></mu-raised-button>
        </div>
    </div>

    <section class="tips pd20 f12 t3">
        <ul>
          <li v-for="(v, i) in APPOINT_SUCCESS_TIPS" :key="i">{{(i+1)+'.'+v}}</li>
        </ul>
      </section>

  </div>
</template>

<script>
import {CANCEL_ORDER_RESIONS, APPOINT_SUCCESS_TIPS} from '@/api/const'
import CommonList from '@/components/CommonList'
import {commonAjax, RESTFUL_API} from '@/api/api'
export default {
  mounted () {
  },
  components: {CommonList},
  data () {
    return {
      // person: JSON.parse(sessionStorage.person),
      currentOrder: JSON.parse(sessionStorage.currentOrder),
      CANCEL_ORDER_RESIONS,
      APPOINT_SUCCESS_TIPS,
      radioResion: ''
    }
  },
  methods: {
    cancelOrder () {
      let param = {
        hisOrderNumber: this.currentOrder.hisOrderNumber,
        refundReason: this.radioResion,
        agtOrderNumber: this.currentOrder.agtOrderNumber
      }
      // if (this.currentOrder.payStatus === 2) {
        // alert('已支付')
        // param.outOrderNumber = this.currentOrder.outOrderNumber
      // }
      // alert(JSON.stringify(param))
      commonAjax(`${RESTFUL_API.appointmentPayCancel}`, param, true).then(res => {
          if (res.data.code == 200) {
          this.$store.commit('UPDATE_TOAST', {
            message: '手机挂号取消成功',
            fn: () => this.$router.replace('/appointment/history')
          })
        } else {
          this.$store.commit('UPDATE_TOAST', {
            message: res.data.message
          })
        }
      }).catch(res => {
          console.log(res)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.cancel-order {
  .cancel-content {
    margin:0 10px 10px;
  }
  .cancel-order-bottom {
    .col {
      padding: .5em 0;
      &.col-20 {text-align: right;}
    }
  }
}
</style>
